<template>
    <router-link class="shop-item" :to='{path:"/ShopDetail",query:{userId:$route.query.userId,shopId:shopItem.id}}'>
		<div class="picture">
			<img :src="shopItem.logo" alt="">
		</div>	
		<div class="name">{{shopItem.name}}</div>
		<div class="info">
			<div class="shop-item-price">￥{{shopItem.discountPrice}}  <span class="old">市场价：￥{{shopItem.price}}</span></div>
            
		</div>
	</router-link>	
</template>
<script>
/** 
 * { 
 * id : ,     商品id
 * price:,    商品价格
 * type?:,		商品类型，可选
 * pic:       商品图片
 * address?:  商品地址，可选
 * },
 */
export default {
	name:'shop-item',
	props:{
		shopItem:{
			type:Object,
			// required:true,
		}
	}
}
</script>
<style lang="less" scoped>

.shop-item{
	width: 100%;
    background: #fff;
    overflow: hidden;
	.picture{
		width: 100%;
		height:364px;
		overflow: hidden;
		img{
				width: 100%;
				min-height:364px;
		}
	}
	.name{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #000000;
		font-size: 30px;
		margin-top: 40px;
	}
	.info{
		display: flex;
		margin-top: 17px;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		.shop-item-price{
		color: #ff4444;
		font-size: 30px;
		background: #fff;
        }
        .old{
     text-decoration:line-through;
     color: #7d7d7d;
     float: right;
     font-size: 20px;
     line-height: 42px;
     padding-left:40px;
}
		.type{
			width: 70px;
			height: 32px;
			background-color: #feefec;
			text-align: center;
			line-height: 32px;
			font-size:23px;
		    color: #ff4444;
		}
	}
	.address{
			color: #999999;
			font-size:  20px;
	}
}
</style>


